<!--
 * @Description: 修改密码步骤条1
 * @Date:
 * @LastEditTime:
 * @FilePath:
-->
<template>
  <div class="step1">
    <el-form label-position="right" label-width="100px" ref="formRef" :model="formData" :rules="rules" style="text-align: center">
      <el-form-item label="当前用户:" prop="userName"> <el-input v-model="formData.userName" /> </el-form-item>
      <el-form-item label="原密码:" prop="oldPassword">
        <el-input v-model="formData.oldPassword" show-password type="password" />
      </el-form-item>
      <el-button type="primary" @click="next" :loading="loading">下一步</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import useCurrentInstance from "@/utils/useCurrentInstance";
import md5 from "js-md5";

const emit = defineEmits(["next"]);
interface IFormState {
  userName: string;
  oldPassword: string;
}
const { proxy } = useCurrentInstance();
const loading = ref(false);
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请填写当前用户", trigger: "blur" }],
  oldPassword: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
const userStore = useUserStore();
const username = computed(() => userStore.userInfo.U_Name);
const formData = reactive<IFormState>({
  userName: username.value,
  oldPassword: ""
});
const next = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      proxy.$vueAxios
        .post(
          "MasterBaseUsers/CheckPassword",
          {
            u_Name: formData.userName,
            u_PWD: md5(formData.oldPassword)
          },
          { noLoading: true }
        )
        .then((res: any) => {
          if (res.Mark) {
            loading.value = true;
            emit("next");
          } else {
            proxy.$message.warning(res.Msg);
          }
        });
    }
  });
};
</script>

<style lang="scss" scoped>
.formItem {
  text-align: center;
  margin: 0 auto;
}
</style>
